<template>
  <view>
    <view v-if="showPopup" class="popup-choose-title">
      <view
        :class="
          currentPackage == 0
            ? 'consultant-service-package-active'
            : 'consultant-service-package'
        "
        @click="chooseCurrentPackage(0)"
      >
        <view
          :class="
            currentPackage == 0
              ? 'consultant-service-package-active-bg'
              : 'consultant-service-package-bg'
          "
        ></view
        >顾问服务套餐
      </view>
      <view
        :class="
          currentPackage == 1 ? 'job-tools-package-active' : 'job-tools-package'
        "
        @click="chooseCurrentPackage(1)"
        v-if="jobToolService[0].isFree == 0"
        >求职工具套餐</view
      >
      <view class="close-button" @click="closePopup"></view>
    </view>
    <u-popup
      class="popup-info"
      v-if="showPopup"
      v-model="showPopup"
      :mask-close-able="false"
      :closeable="false"
      mode="bottom"
      border-radius="14"
      width="100%"
      height="75%"
    >
      <scroll-view scroll-y="true" class="choose-service">
        <view
          class="shop"
          v-for="(obj, index) in shopList"
          :key="index"
          v-if="currentPackage == 0"
        >
          <view class="shop-name" @click="addOrRemoveOneService(obj, index)">
            <view
              class="choose-button"
              v-if="obj.isChoosen == false"
              style="margin-top: 0rpx"
            ></view>
            <view class="choose-sth" style="margin-top: 0rpx" v-else></view>
            {{ obj.groupName }}
          </view>
          <view class="discount-content">
            <view class="discounts">特惠</view>
            <view class="discount-name"
              >购买以下 3 项全部服务，享受
              8.5折，本次活动『优惠价格』仅限活动期间</view
            >
          </view>
          <view
            v-for="(item, _index) in obj.productList"
            :key="_index"
            class="service-item"
            @click="addOrRemoveOneService(item, index)"
          >
            <view v-if="currentPackage == 0" style="flex-basis: 80rpx">
              <view class="choose-button" v-if="item.isChoosen == false"></view>
              <view class="choose-sth" v-else></view>
            </view>
            <view v-else style="flex-basis: 80rpx"> </view>
            <view class="right-card">
              <view class="right-card-content">
                <img class="service-picture" :src="item.productImg" />
                <view class="right-info">
                  <view class="service-name">{{ item.productName }}</view>
                  <text class="service-desc">{{ item.productDesc }}</text>
                  <view class="service-price"
                    ><span style="font-size: 24rpx; font-weight: 800">￥</span
                    >{{ item.price }}
                    <view class="old-price"
                      >原价 <span>￥{{ item.originPrice }}</span>
                      <view class="line"></view>
                    </view>
                  </view>
                </view>
              </view>
              <view
                class="bottom-line"
                v-if="_index < obj.productList.length - 1"
              ></view>
            </view>
          </view>
        </view>
        <view
          class="shop"
          v-for="(obj, index) in jobToolService"
          :key="index"
          v-if="currentPackage == 1"
        >
          <view class="shop-name" @click="addOrRemoveOneService(obj, index)">
            <view
              class="choose-button"
              v-if="obj.isChoosen == false"
              style="margin-top: 0rpx"
            ></view>
            <view class="choose-sth" style="margin-top: 0rpx" v-else></view>
            {{ obj.productName }}
          </view>
          <view class="discount-content">
            <view class="discounts">特惠</view>
            <view class="discount-name"
              >购买求职工具套餐，享受
              8.5折，获得以下权益服务，本次活动『优惠价格』仅限活动期间</view
            >
          </view>
          <view
            v-for="(item, _index) in obj.packageRightList"
            :key="_index"
            class="service-item"
          >
            <view v-if="currentPackage == 0" style="flex-basis: 80rpx">
              <!-- <view class="choose-button" v-if="item.isChoosen == false"></view> -->
              <view class="choose-sth"></view>
            </view>
            <view v-else style="flex-basis: 80rpx"> </view>
            <view class="right-card">
              <view class="right-card-content">
                <img class="service-picture" :src="item.rightImg" />
                <view class="right-info">
                  <view class="service-name">{{ item.rightName }}</view>
                  <text class="service-desc">{{ item.rightRemark }}</text>
                  <view class="service-price"
                    ><span
                      style="
                        font-size: 24rpx;
                        font-weight: 800;
                        margin-top: 8rpx;
                      "
                      >￥</span
                    >{{ item.price }}
                    <view class="old-price"
                      >原价 <span>￥{{ item.originPrice }}</span>
                      <view class="line"></view>
                    </view>
                  </view>
                </view>
              </view>
              <view
                class="bottom-line"
                v-if="_index < obj.packageRightList.length - 1"
              ></view>
            </view>
          </view>
        </view>
      </scroll-view>
      <view class="shopping-operation">
        <view class="shopping-cart">
          <view class="chosen"
            >已选<span>{{ chosenNum }}</span
            >个</view
          >
          <view class="price">
            <view
              >合计：<span
                ><span style="font-size: 24rpx">￥</span>{{ showPrice }}</span
              ></view
            >
            <view class="discount-price" v-if="discountPrice != 0"
              >共优惠￥{{ discountPrice }}</view
            >
          </view>
        </view>
        <view class="right-button" @click="gotoPay">
          <span style="margin-left: 20rpx">立即购买</span>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import {
  addCartAndToOrder,
  addZhituPayOrder,
  getProductGroup,
  getCardRightPackage,
  getGroupDiscountList,
} from "@/api/modules/career";
export default {
  props: {
    showPopup: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      showPrice: 0, // 用于展示给用户计算折扣的价格
      sumPrice: 0,
      discountPrice: 0,
      shopList: [],
      currentPackage: 1,
      chosenNum: 0,
      jobToolService: [], // 求职工具套餐的数据
      mallProductId: "", // 用于支付生成订单
      rightProductId: "", // 商品组id
      groupId: "", //用于折扣的groupId
      discontList: [], // 折扣列表
    };
  },
  created() {
    //获取支付提供商
    uni.getProvider({
      service: "payment",
      success: (res) => {
        this.provider = res.provider;
        console.log("this.provider", this.provider);
      },
    });
    this.getProductGroupFn();
    this.getCardRightPackageFn();
  },
  watch: {},
  methods: {
    async getGroupDiscountListFn() {
      const params = {
        groupId: this.groupId,
      };
      const res = await getGroupDiscountList(params);
      if (res.code == 200) {
        console.log("res", res);
        this.discontList = res.data;
      }
    },
    async getCardRightPackageFn() {
      const params = {
        cardType: uni.getStorageSync("cardType"),
      };
      const res = await getCardRightPackage(params);
      if (res.code == 200) {
        this.jobToolService = res.data;
        this.jobToolService.forEach((ele) => {
          ele.isChoosen = false;
        });
        if (res.data[0].isFree) {
          this.currentPackage = 0;
        } else {
          return;
        }
      }
    },
    gotoPay() {
      if (this.chosenNum > 0) {
        if (this.currentPackage == 0) {
          this.shopList.forEach((item) => {
            item.productList.forEach((_item) => {
              if (_item.isChoosen == true) {
                if (this.mallProductId !== "") {
                  this.mallProductId =
                    this.mallProductId + "," + _item.mallProductId;
                } else {
                  this.mallProductId = _item.mallProductId;
                }
                if (this.rightProductId !== "") {
                  this.rightProductId = this.rightProductId + "," + _item.id;
                } else {
                  this.rightProductId = _item.id;
                }
              }
            });
          });
        } else {
          this.mallProductId = this.jobToolService[0].mallProductId;
          this.rightProductId = this.jobToolService[0].id;
        }
        this.addCartAndToOrder();
      } else {
        console.log("没有选择商品");
      }
    },
    //1.生成订单
    addCartAndToOrder() {
      uni.showLoading({
        title: "生成订单中...",
        mask: true,
      });
      addCartAndToOrder({
        orderType: "ZT_SERVICE",
        mallProductId: this.mallProductId,
        channelType: 80,
        sourceType: 3,
        personId: uni.getStorageSync("person-id").slice(2),
        rightId: this.rightId,
        cardType: uni.getStorageSync("cardType"),
        orderCondition: {
          rightProductId: this.rightProductId,
          groupId: this.groupId,
        },
      })
        .then((res) => {
          console.log("this.rightProductId", this.rightProductId);
          if (res.code == 200) {
            this.rightProductId = "";
            this.mallProductId = "";

            this.addZhituPayOrder(res.data);
          } else {
            this.rightProductId = "";
            this.mallProductId = "";
            uni.hideLoading();
            uni.showToast({
              title: res.status_desc || "生成订单失败",
              icon: "none",
              duration: 2000,
            });
          }
        })

        .catch((err) => {
          uni.hideLoading();
          uni.showToast({
            title: err.status_desc || "生成订单失败",
            icon: "none",
            duration: 2000,
          });
        })
        .finally(() => {});
    },
    //2.通过订单获取支付信息
    addZhituPayOrder(data) {
      addZhituPayOrder({
        ...data,
        orderType: "ZT_SERVICE",
        wayCode: "WX_LITE",
        personId: uni.getStorageSync("person-id").slice(2) || undefined,
        personName: uni.getStorageSync("personName"),
        openid: uni.getStorageSync("openid"),
      })
        .then((res) => {
          console.log(res);
          if (res.code == 200) {
            this.requestPayment(res.data);
          } else {
            uni.hideLoading();
            uni.showToast({
              title: res.status_desc || "获取商品信息失败",
              icon: "none",
              duration: 2000,
            });
          }
        })
        .catch((err) => {
          uni.hideLoading();
          uni.showToast({
            title: err.status_desc || "获取商品信息失败",
            icon: "none",
            duration: 2000,
          });
        })
        .finally(() => {});
    },
    //3.使用支付信息调用支付
    requestPayment(data) {
      uni.hideLoading();
      if (this.provider.indexOf("wxpay") < 0) {
        return;
      }
      this.rightProductId = "";
      const payData = JSON.parse(data.payData);
      uni.requestPayment({
        provider: this.provider[0],
        timeStamp: payData.timeStamp,
        nonceStr: payData.nonceStr,
        package: payData.package,
        signType: payData.signType,
        paySign: payData.paySign,
        success: (res) => {
          // this.handlePaySuccess(res);
          // uni.redirectTo({
          //   url: `/pagesSub/careerNew/zhituPaytoC/paySuccess?rightId=${this.rightId}&cardType=${this.cardType}`,
          // });
          uni.redirectTo({
            url:
              `/pagesSub/userCenter/careerPathV2/components/zhituPayFinish?mallOrderId=` +
              data.orderId,
          });
        },
        fail: (err) => {
          uni.showToast({
            title: "支付失败,请您重新支付",
            icon: "none",
            duration: 3000,
          });
        },
      });
    },
    chooseCurrentPackage(index) {
      this.currentPackage = index;
      this.chosenNum = 0;
      this.sumPrice = 0;
      this.showPrice = 0;
      this.discountPrice = 0;
      this.rightProductId = "";
      this.mallProductId = "";
      this.shopList.forEach((item) => {
        item.isChoosen = false;
        item.productList.forEach((_item) => {
          _item.isChoosen = false;
        });
      });
      this.jobToolService.forEach((ele) => {
        ele.isChoosen = false;
      });
      // if (index == 0) {
      //   this.mallProductId = this.shopList[0].productList[0].mallProductId;
      // } else {
      //   this.mallProductId = this.jobToolService[0].mallProductId;
      // }
    },
    async getProductGroupFn() {
      const params = {
        personId: uni.getStorageSync("person-id").slice(2) || undefined,
        id: "1",
        unlockTypeList: [10, 20, 30, 40],
        productSignList: ["ZHITU_TOC_SERVICE"],
      };
      const res = await getProductGroup(params);
      if (res.code == 200 && Array.isArray(res.data) && res.data.length) {
        this.productSign = res.data[0].productSign;
        this.groupId = res.data[0].id;
        this.getGroupDiscountListFn();
        // if (this.productSign != "ZHITU_WUHAN_SERVICE") {
        //   uni.navigateTo({
        //     url: this.ZHI_TU_PAGE,
        //   });
        // }
        this.shopList = res.data;
        console.log("this.shopList", this.shopList);
        this.shopList.forEach((item) => {
          item.isChoosen = false;
          if (item.productList) {
            item.productList.forEach((_item) => {
              _item.isChoosen = false;
            });
          }
          if (item.ladderUnlockRightJson) {
            item.ladderUnlockRightJson.forEach((ele) => {
              ele.services = "";
              if (ele.rightList) {
                ele.rightList.forEach((_ele) => {
                  if (ele.services != "") {
                    ele.services = ele.services + "," + _ele.rightName;
                  } else {
                    ele.services = _ele.rightName;
                  }
                });
              }
            });
          }
        });
      }
    },
    closePopup() {
      this.$emit("closePopup");
    },
    addOrRemoveOneService(item, index) {
      if (item.isChoosen == false) {
        this.addOneService(item, index);
      } else {
        this.cancelOneService(item, index);
      }
      if (this.chosenNum > 0) {
        if (this.currentPackage == 0) {
          this.showPrice =
            this.sumPrice * this.discontList[this.chosenNum - 1].discount;
          this.showPrice = this.showPrice.toFixed(0);
        } else {
          this.showPrice = this.sumPrice;
        }
      } else {
        this.showPrice = 0;
      }
    },
    addOneService(item, index) {
      item.isChoosen = true;
      // 判断是一级还是二级
      if (item.productList || item.packageRightList) {
        if (this.currentPackage == 0) {
          item.productList.forEach((element) => {
            // 如果是false才要加钱 否则会重复计算
            if (element.isChoosen == false) {
              this.sumPrice += element.price;
              this.chosenNum += 1;
              this.discountPrice += element.originPrice - element.price;
              element.isChoosen = true;
            }
          });
        } else {
          console.log("item", item);
          this.chosenNum += 1;
          this.sumPrice = item.price;
          this.discountPrice = item.originPrice - item.price;
          item.packageRightList.forEach((element) => {
            // 如果是false才要加钱 否则会重复计算
            // this.sumPrice += element.price;
            // this.discountPrice += element.originPrice - element.price;
            element.isChoosen = true;
          });
        }
      } else {
        console.log("此时点击了二级菜单中的某一项");
        this.sumPrice += item.price;
        this.discountPrice += item.originPrice - item.price;
        this.chosenNum += 1;
        // 此时处于二级菜单 要监测此项点击完后一级的全选是否要打钩或者取消
        // 通过index到原数组中去判断
        this.shopList[index].isChoosen = true;
        this.shopList[index].productList.forEach((_item) => {
          if (_item.isChoosen == false) {
            // 遍历走一遍 如果有false说明没有全选 那么一级菜单就是false
            this.shopList[index].isChoosen = false;
          }
        });
      }
    },
    cancelOneService(item, index) {
      item.isChoosen = false;

      // 判断是一级还是二级
      if (item.productList || item.packageRightList) {
        if (this.currentPackage == 0) {
          item.productList.forEach((element) => {
            if (element.isChoosen == true) {
              this.sumPrice -= element.price;
              this.discountPrice -= element.originPrice - element.price;

              this.chosenNum -= 1;
              element.isChoosen = false;
            }
          });
        } else {
          this.chosenNum = 0;
          this.sumPrice = 0;
          this.discountPrice = 0;
          item.packageRightList.forEach((element) => {
            // this.sumPrice -= element.price;
            // this.discountPrice -= element.originPrice - element.price;
            element.isChoosen = false;
          });
        }
      } else {
        this.sumPrice -= item.price;
        this.discountPrice -= item.originPrice - item.price;
        this.chosenNum -= 1;
        // 此时处于二级菜单 要监测此项点击完后一级的全选是否要打钩或者取消
        // 通过index到原数组中去判断
        this.shopList[index].isChoosen = true;
        this.shopList[index].productList.forEach((_item) => {
          if (_item.isChoosen == false) {
            // 遍历走一遍 如果有false说明没有全选 那么一级菜单就是false
            this.shopList[index].isChoosen = false;
          }
        });
      }
    },
  },
};
</script>

<style lang="scss">
$img-base-careerPath: $img-base + "careerPath/";

@font-face {
  font-family: "D-DIN-PRO-800-ExtraBold";
  /*定义字体名称*/
  src: url("https://img3.job1001.com/ypMp/elan/fontFamily/careerPath/D-DIN-PRO-800-ExtraBold.ttf");
}

.popup-choose-title {
  position: fixed;
  top: 15%;
  width: 100%;
  height: 168rpx;
  background-image: url($img-base-careerPath + "blackBackground.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  border-radius: 28rpx 28rpx 0rpx 0rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  z-index: 100000;

  .consultant-service-package-active {
    flex: 1;
    color: #f0cac5;
    padding: 20rpx 42rpx 0 42rpx;
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 100%;
    font-size: 32rpx;

    .consultant-service-package-active-bg {
      width: 42rpx;
      height: 42rpx;
      background-image: url($img-base-careerPath + "diamond-active.png");
      background-repeat: no-repeat;
      background-size: 100% 100%;
      margin-right: 8rpx;
    }
  }

  .consultant-service-package {
    flex: 1;
    color: #a7a0a0;
    padding: 20rpx 42rpx 0 42rpx;
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 100%;
    font-size: 32rpx;

    .consultant-service-package-bg {
      width: 42rpx;
      height: 42rpx;
      background-image: url($img-base-careerPath + "diamond.png");
      background-repeat: no-repeat;
      background-size: 100% 100%;
      margin-right: 8rpx;
    }
  }

  .consultant-service-package-active:after {
    position: absolute;
    content: "";
    width: 0;
    height: 0;
    top: 150rpx;
    left: 15%;
    border-right: solid 10px transparent;
    border-left: solid 10px transparent;
    border-bottom: solid 10px #f4f6f8;
  }

  .job-tools-package-active {
    flex: 1;
    color: #f0cac5;
    padding: 20rpx 42rpx 0 42rpx;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-size: 32rpx;
  }

  .job-tools-package {
    flex: 1;
    color: #a7a0a0;
    padding: 20rpx 42rpx 0 42rpx;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-size: 32rpx;
  }

  .job-tools-package-active:after {
    position: absolute;
    content: "";
    width: 0;
    height: 0;
    top: 150rpx;
    left: 65%;
    border-right: solid 10px transparent;
    border-left: solid 10px transparent;
    border-bottom: solid 10px #f4f6f8;
  }

  .close-button {
    width: 48rpx;
    height: 48rpx;
    padding: 12rpx;
    box-sizing: border-box;
    background-image: url($img-base + "career/shoppingCarCloseButton.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    position: absolute;
    right: 32rpx;
    top: 32rpx;
  }
}

.popup-info {
  z-index: 99999;
  position: relative;

  ::v-deep .u-drawer-bottom {
    background-color: #f4f6f8;
  }

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  .choose-service {
    height: 84%;
    border-radius: 16rpx;
    background-color: #ffffff;
    width: calc(100% - 32rpx);
    margin: 20rpx 16rpx;
    padding: 18rpx 24rpx;
    box-sizing: border-box;
    overflow-y: scroll;
    position: fixed;

    .shop {
      margin-bottom: 36rpx;

      .shop-name {
        display: flex;
        flex-direction: row;
        align-items: center;
        font-weight: 800;
        font-size: 36rpx;
        color: #111111;
      }

      .discount-content {
        margin-top: 10rpx;
        display: flex;
        flex-direction: row;
        align-items: flex-start;

        .discounts {
          width: 70rpx;
          height: 40rpx;
          border-radius: 6rpx;
          border: 2rpx solid #fb5806;
          font-weight: 400;
          font-size: 24rpx;
          color: #fb5806;
          margin-left: 60rpx;
          display: flex;
          align-items: center;
          justify-content: center;
        }

        .discount-name {
          flex: 1;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 24rpx;
          color: #fb5806;
          margin-left: 20rpx;
        }
      }

      .shop-desc {
        /* margin-left: 60rpx; */
        width: 100%;
        font-weight: 400;
        font-size: 24rpx;
        color: #888888;

        span {
          color: #ff711e;
          margin: 0 10rpx;
        }
      }

      .desc-box {
        width: calc(100% - 50rpx);
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        /* padding: 0 50rpx; */
        margin-left: 60rpx;
        margin-top: 12rpx;

        .left-desc {
          flex-basis: 90%;
        }

        .right-arrow {
          width: 24rpx;
          height: 24rpx;
          margin-right: 12rpx;
          background-image: url($img-base + "career/right-arrow.png?v=1");
          background-size: 100% 100%;
        }
      }

      .service-item {
        display: flex;
        flex-direction: row;
        /* align-items: center; */
        margin-top: 42rpx;
        box-sizing: border-box;

        .service-picture {
          width: 148rpx;
          height: 148rpx;
          border-radius: 16rpx;
        }

        .right-card {
          display: flex;
          flex-direction: column;

          .right-card-content {
            display: flex;
            flex-direction: row;
            align-items: top;

            .right-info {
              margin-left: 18rpx;
              width: 450rpx;

              .service-name {
                font-family: PingFang-SC, PingFang-SC;
                font-weight: 800;
                font-size: 32rpx;
                color: #333333;
                margin-bottom: 12rpx;
              }

              .service-desc {
                white-space: normal;
                font-weight: 400;
                font-size: 28rpx;
                color: #777777;
                /* margin-top: 12rpx; */
                line-height: 40rpx;
              }

              .service-price {
                margin-top: 12rpx;
                color: #ff711e;
                font-size: 44rpx;
                /* font-weight: 800; */
                font-family: "D-DIN-PRO-800-ExtraBold";
                display: flex;
                flex-direction: row;
                align-items: center;

                .old-price {
                  margin-left: 10px;
                  position: relative;
                  padding: 5rpx;
                  font-size: 26rpx;
                  color: #d29875;

                  .line {
                    position: absolute;
                    top: 50%;
                    width: 100%;
                    height: 2rpx;
                    background-color: #af734f;
                  }
                }
              }
            }
          }

          .bottom-line {
            width: 100%;
            height: 4rpx;
            background-color: #eaeaea;
            margin-top: 40rpx;
          }
        }
      }

      .choose-button,
      .choose-sth {
        /* width: 40rpx; d*/
        height: 40rpx;
        border-radius: 32rpx;
        border: 2rpx solid #d3d3d3;
        margin-right: 20rpx;
        flex-basis: 40rpx;
        margin-top: 54rpx;
      }

      .choose-sth {
        background-image: url($img-base-careerPath + "chooseSth.png");
        background-size: 100%;
      }
    }
  }

  .shopping-operation {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    background-color: #ffffff;
    height: 10vh;
    position: absolute;
    bottom: 0;
    padding: 18rpx 32rpx 30rpx 30rpx;

    .discount-price {
      color: #fb5806;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 24rpx;
    }

    .right-button {
      /* flex-grow: 1; */
      width: 308rpx;
      height: 74rpx;
      box-sizing: border-box;
      background-image: url($img-base + "careerPath/wuhan-buynow3.png");
      background-size: 100% 100%;
      color: #ffffff;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: left;
      padding: 24rpx 48rpx 20rpx 48rpx;

      span {
        font-family: D-DIN-PRO, D-DIN-PRO;
        font-weight: 800;
        font-size: 32rpx;
      }
    }

    .shopping-cart {
      flex-basis: 360rpx;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-around;

      .chosen {
        color: #888888;
        font-size: 28rpx;

        span {
          color: #ff711e;
          margin: 0 10rpx;
          font-weight: 800;
        }
      }

      .price {
        color: #222222;
        font-size: 30rpx;

        span {
          color: #ff711e;
          font-size: 34rpx;
          font-family: PingFang-SC, PingFang-SC;
        }
      }
    }
  }
}

/* .shopping-operation {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;

  .shopping-cart {
    flex-basis: 360rpx;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;

    .chosen {
      color: #888888;
      font-size: 28rpx;

      span {
        color: #ff711e;
        margin: 0 10rpx;
        font-weight: 800;
      }
    }

    .price {
      color: #222222;
      font-size: 30rpx;

      span {
        color: #ff711e;
        font-size: 34rpx;
        font-family: PingFang-SC, PingFang-SC;
      }
    }
  }
} */
</style>
